<template>
  <div class="comment-reply">
    <!-- 头部信息 -->
    <van-nav-bar :title="comment.reply_count+'条回复'">
      <van-icon slot="left" name="cross" @click="$emit('close')"></van-icon>
    </van-nav-bar>
    <!-- 当前评论项 -->
    <comment-item :comment='comment'></comment-item>

    <!-- 所有评论回复 -->
    <van-cell title="所有回复"></van-cell>
    <comment-list :source='comment.com_id.toString()' type='c' :list='commentList' @reply-click='handleReplyClick'></comment-list>
    <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button class="comment-button" type="default" round size="small" @click="isPostShow = true; isParentComment = true; replyComment = {}">写评论</van-button>
    </div>

    <!-- 发布弹框 -->
    <van-popup
      v-model="isPostShow"
      position="bottom"
    >
    <post-comment :target='commentid' :article-id='articleId' :comment='replyComment' @post-success='hanlePostSuccess' />
    </van-popup>
  </div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import PostComment from './post-coment'

export default {
  name: 'CommentReply',
  components: { CommentItem, CommentList, PostComment },
  props: {
    comment: {
      type: Object,
      required: true,
      default: () => {}
    },
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      isPostShow: false,
      replyComment: {}, // 点前回复项
      isParentComment: true, // 是否为二级(否则为三级)
      commentList: []
    }
  },
  computed: {
    commentid () {
      if (this.isParentComment) {
        return this.comment.com_id.toString()
      }
      return this.replyComment.com_id.toString()
    }
  },
  watch: {},
  mounted () {},
  methods: {
    // 发送成功的回调
    hanlePostSuccess (data) {
      this.commentList.unshift(data)
      this.isPostShow = false
    },
    // 点击回复
    handleReplyClick (comment) {
      this.replyComment = comment
      this.isParentComment = false
      this.isPostShow = true
    }
  }
}

</script>
<style lang='less' scoped>
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-button {
    width: 200px;
    height: 30px;
    border: 1px solid #eeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
}
</style>
